<template>
  <div class='container'>
    <el-dialog
      title="预览文章"
      :visible="dialogVisible"
      width="65%"
      center
      :before-close="close"
      >
    <el-header style="height:100px">
      <h1>{{articleInfo.title}}</h1>
      <span>{{articleInfo.createTime | parseTimeByString}} <i class="el-icon-time"></i></span>
      <hr>
    </el-header>
    <el-main v-html="articleInfo.articleBody">
    </el-main>
    <div v-if="flag">
      <div v-if="articleInfo.videoURL">
        <video
          style="width:100%;height:400px"
          class="video-js"
          controls
          autoplay="muted"
          preload="auto">
          <source :src="articleInfo.videoURL" type="video/mp4" >
        </video>
      </div>
    </div>
    <el-footer>
      <div>
      <el-tag>作者:</el-tag>
      <el-button style="margin:10px 20px 20px" type="primary">{{articleInfo.username}}</el-button>
      </div>
      <div style="height:40px">
        <i class="el-icon-view"></i>
        {{articleInfo.visits}}
      </div>
    </el-footer>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="close">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      flag: true
    }
  },
  props: {
    articleInfo: {
      type: Object,
      required: true
    },
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    close () {
      this.flag = false
      this.$emit('closePreview')
    }
  }
}
</script>

<style scoped lang='less'></style>
